<div class="environmental-monitoring">
  <div class="environmental-monitoring-head">
    <div class="head-left">
      <a [routerLink]="['/outer/project-type']" class="breadcrumb">
        项目
      </a>
      <i nz-icon type="right" theme="outline"></i>
      <a (click)="routeToSurvey()" class="breadcrumb">
        {{projectInfo.name}}
      </a>
      <b>
        <i nz-icon type="right" theme="outline"></i>
        环境监测
      </b>
    </div>
  </div>
  <div class="environmental-monitoring-body zzj-scrollbar">
    <!-- 顶部 -->
    <div class="environmental-monitoring-body-top">
      <div nz-row nzGutter="16" nzType="flex" nzJustify="space-between">
        <div class="environmental-monitoring-body-top-item" *ngFor="let item of topList" nz-col nzSpan="5">
          <div class="environmental-monitoring-body-top-info">
            <div>{{item.name}}</div>
            <div>{{item.value}}</div>
          </div>
          <div class="environmental-monitoring-body-top-icon">
            <img *ngIf="item.name === '当前PM2.5'" src="../../../../../assets/images/project/chart_blue.png" alt="">
            <img *ngIf="item.name === '当前PM10'" src="../../../../../assets/images/project/chart_purple.png" alt="">
            <img *ngIf="item.name === '当前噪音'" src="../../../../../assets/images/project/chart_green.png" alt="">
            <img *ngIf="item.name === '当前风速'" src="../../../../../assets/images/project/chart_yellow.png" alt="">
            <img *ngIf="item.name === '当前温度'" src="../../../../../assets/images/project/chart_red.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <!-- PM -->
    <div class="environmental-monitoring-body-mid" nz-row nzGutter="16" nzType="flex" nzJustify="space-between">
      <div nz-col nzSpan="12">
        <div class="environmental-monitoring-body-mid-left">
          <div class="echarts-top">
            <div class="echarts-top-left">
              PM2.5
            </div>
            <div class="echarts-top-right">
              <nz-radio-group [(ngModel)]="echartsPM25RadioValue"
                (ngModelChange)="radioChange($event, 'pm25EchartsOption')" [nzButtonStyle]="'solid'" [nzSize]="'small'">
                <label nz-radio-button nzValue="24">近24小时</label>
                <label nz-radio-button nzValue="7">近7日</label>
                <label nz-radio-button nzValue="15">近15日</label>
                <label nz-radio-button nzValue="30">近30日</label>
              </nz-radio-group>
            </div>
            <div style="clear: both;"></div>
          </div>
          <div echarts [options]="pm25EchartsOption" style="height: 90%;width: 100%;min-height: 180px"></div>
        </div>
      </div>
      <div nz-col nzSpan="12">
        <div class="environmental-monitoring-body-mid-right">
          <div class="echarts-top">
            <div class="echarts-top-left">
              PM10
            </div>
            <div class="echarts-top-right">
              <nz-radio-group [(ngModel)]="echartsPM10RadioValue"
                (ngModelChange)="radioChange($event, 'pm10EchartsOption')" [nzButtonStyle]="'solid'" [nzSize]="'small'">
                <label nz-radio-button nzValue="24">近24小时</label>
                <label nz-radio-button nzValue="7">近7日</label>
                <label nz-radio-button nzValue="15">近15日</label>
                <label nz-radio-button nzValue="30">近30日</label>
              </nz-radio-group>
            </div>
            <div style="clear: both;"></div>
          </div>
          <div echarts [options]="pm10EchartsOption" style="height: 90%;width: 100%;min-height: 180px"></div>
        </div>
      </div>
    </div>
    <!-- 噪音 -->
    <div class="environmental-monitoring-body-mid-add">
      <div class="echarts-top">
        <div class="echarts-top-left">
          噪音
        </div>
        <div class="echarts-top-right">
          <nz-radio-group [(ngModel)]="echartsNoiseRadioValue"
            (ngModelChange)="radioChange($event, 'noiseEchartsOption')" [nzButtonStyle]="'solid'" [nzSize]="'small'">
            <label nz-radio-button nzValue="24">近24小时</label>
            <label nz-radio-button nzValue="7">近7日</label>
            <label nz-radio-button nzValue="15">近15日</label>
            <label nz-radio-button nzValue="30">近30日</label>
          </nz-radio-group>
        </div>
        <div style="clear: both;"></div>
      </div>
      <div echarts [options]="noiseEchartsOption" style="height: 90%;width: 100%;min-height: 180px"></div>
    </div>
    <!-- 下面 -->
    <div class="environmental-monitoring-body-bottom" nz-row nzGutter="16" nzType="flex" nzJustify="space-between">
      <!-- 风速 -->
      <div nz-col nzSpan="12">
        <div class="environmental-monitoring-body-bottom-left">
          <div class="echarts-top">
            <div class="echarts-top-left">
              风速
            </div>
            <div class="echarts-top-right">
              <nz-radio-group [(ngModel)]="echartsWindSpeedValue"
                (ngModelChange)="radioChange($event, 'windSpeedOption')" [nzButtonStyle]="'solid'"
                [nzSize]="'small'">
                <label nz-radio-button nzValue="24">近24小时</label>
                <label nz-radio-button nzValue="7">近7日</label>
                <label nz-radio-button nzValue="15">近15日</label>
                <label nz-radio-button nzValue="30">近30日</label>
              </nz-radio-group>
            </div>
            <div style="clear: both;"></div>
          </div>
          <div echarts [options]="windSpeedOption" style="height: 90%;width: 100%;min-height: 180px"></div>
        </div>
      </div>
      <!-- 温度 -->
      <div nz-col nzSpan="12">
        <div class="environmental-monitoring-body-bottom-right">
          <div class="echarts-top">
            <div class="echarts-top-left">
              温度
            </div>
            <div class="echarts-top-right">
              <nz-radio-group [(ngModel)]="echartsTemperatureRadioValue"
                (ngModelChange)="radioChange($event, 'temperatureOption')" [nzButtonStyle]="'solid'" [nzSize]="'small'">
                <label nz-radio-button nzValue="24">近24小时</label>
                <label nz-radio-button nzValue="7">近7日</label>
                <label nz-radio-button nzValue="15">近15日</label>
                <label nz-radio-button nzValue="30">近30日</label>
              </nz-radio-group>
            </div>
            <div style="clear: both;"></div>
          </div>
          <div echarts [options]="temperatureOption" style="height: 90%;width: 100%;min-height: 180px"></div>
        </div>
      </div>
    </div>
  </div>
</div>